var basics = Vue.extend({
    template: `<div>
    <el-card class="box-card" >
                        <div slot="header" class="clearfix">
                          <span>基础信息</span>
                          <el-button style="float: right;" type="primary" @click="submitForm('basicsForm')">保存</el-button>
                        </div>
                        <div class="text item">
                          <el-form style="font-size: 18px" :model="basicsForm" :rules="basicsRules" 
                          ref="basicsForm" label-width="130px" class="demo-ruleForm">  
                            {{-- 1 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">            
                                <el-form-item label="设备名称 : " prop="name">
                                  <el-input :disabled="!permissions.nameEdit" v-model="basicsForm.name"></el-input>
                                </el-form-item>                                
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="设备编号(IMEI) : " prop="imei">
                                    <el-input :disabled="!permissions.imeiEdit" v-model="basicsForm.imei"></el-input>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="sim : " prop="sim_no">
                                    <el-input :disabled="!permissions.simEdit" v-model="basicsForm.sim_no"></el-input>
                                  </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 2 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="主板类型 : ">
                                  <el-select :disabled="!permissions.mainboradEdit" v-model="basicsForm.mainborad_id" placeholder="选择货机类型">
                                    <el-option 
                                      v-for="item in mainborads"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"></el-option>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="货机类型 : " >
                                  <el-select :disabled="!permissions.setCate" v-model="basicsForm.cate" placeholder="选择货机类型">
                                    <el-option label="普通" value="1"></el-option>
                                    <el-option label="大屏" value="2"></el-option>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="到期时间 : " prop="expire_time">
                                    <el-date-picker
                                        :disabled="!permissions.expireEdit"
                                        v-model="basicsForm.expire_time"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期"
                                        :picker-options="pickerOptions0">
                                      </el-date-picker>
                                  </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 3 --}}
                            <el-row>
                              <el-col :span="15">
                                <el-form-item label="备注 : " prop="rank">
                                  <el-input :disabled="!permissions.rankEdit" type="textarea" :autosize="{ minRows: 5, maxRows: 20}"  style="width: 56%;" v-model="basicsForm.rank"></el-input>
                                </el-form-item>
                              </el-col>
                              <el-col :span="9">
                                <el-form-item label="所属商户 : " >
                                  <a href="javascript:;" @click="changeMerchant" v-if="merchant_info != ''"><el-tag v-if="merchant_info" style="font-size: 18px">@{{ merchant_info.name }}</el-tag>
                                    <el-tag v-if="!merchant_info" style="font-size: 18px">@{{ '请绑定商户' }}</el-tag></a>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            {{-- 1 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="状态 : ">
                                  <el-tag style="font-size: 18px">@{{online().label}}</el-tag>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="信号 : " >
                                  <el-tag v-if="basicsForm.signal" style="font-size: 18px">@{{basicsForm.signal}}</el-tag>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 2 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="温度状态 : " >
                                  <el-tag style="font-size: 18px">@{{ tem_state().label}}</el-tag>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="温度值 : " >
                                  <el-tag style="font-size: 18px">@{{basicsForm.tem}}</el-tag>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 3 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="灯光状态 : " >
                                  <el-tag style="font-size: 18px">@{{led_state().label}}</el-tag>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row :gutter="20">
                              <el-col :span="3">
                                <el-form-item label="二维码 : ">
                                  <el-image 
                                    style="width: 100px; height: 100px"
                                    :src="qrcode" 
                                    :preview-src-list="qrcodes">
                                  </el-image>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item>
                                <form method="POST" :action="qrcodeUrl">
                                    {{ csrf_field() }}
                                    <input type="hidden" name="machine_id" :value="machineId">
                                    <button type="submit" class="btn btn-info btn-xs">下载</button>
                                </form>
                                </el-form-item>
                              </el-col>
                            </el-row>
                          </el-form>                          
                        </div>
                      </el-card>
                    </div>
    `,
    props: {
      permissions:{
        type: Array,
        require: true,
      },
      machineId:{
        type:String,
        require:true,
      },
      postUrl:{
        type: String,
        require: true,
      },
      downloadQrcodeUrl:{
        type: String,
        require: true,
      },
      mainborads:{
        type: Array,
        require: true,
      }
    },
    data: function(){
        return {
          qrcodeUrl:this.downloadQrcodeUrl,
          basicsForm:{
            name:'',
            imei:'',
            sim_no:'',
            cate:'',
            expire_time:'',
            rank:' ',
            mainborad_id:'',
          },
          basicsRules:{
            imei: [
              { required: true, message: '请输入imei号', trigger: 'blur' }
            ],
            expire_time: [
              { required: true, message: '请选择过期时间', trigger: 'change;' },
            ]
          }
        }
    },
    mounted: function(){


    },
    watch:{


    },
    methods: {
      submitForm(formName){
        var that = this;
        that.$refs[formName].validate((valid) => {
          if (valid) {                      
            that.postBasics();                      
          } else {
            return false;
          }
        });    
        
      },
      postBasics(){
        var that = this;
        let postData = {
          name: that.basicsForm.name,
          imei: that.basicsForm.imei,
          sim_no: that.basicsForm.sim_no,
          expire_time: that.basicsForm.expire_time,
          rank: that.basicsForm.rank,
          machine_id: that.basicsForm.id,
          cate: that.basicsForm.cate,
          mainborad_id : that.basicsForm.mainborad_id,
        };
        axios.put(that.postUrl,
        postData
        ).then(res => {
          var data = res.data;
          if(data.msg = "success"){
            that.$message.success('编辑成功');
            that.init();
          }else{
            that.$message.error('编辑失败');
            that.init();
          }
        });
      },
      changeMerchant(){
        
      }
    }
});
Vue.component('machine-basics', basics);